<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>计算属性</title>
        <style>
            .cart { border: 1px solid blue ; margin: 15px auto; }
            .item { display: flex; border: 1px solid #dfdfdf; margin: 10px; }
            .item>.ordinal { flex-basis: 10%; text-align: center; }
            .item>.name { flex-basis: 40%; text-align: center; }
            .item>.price { flex-basis: 15%; text-align: center; }
            .item>.count { flex-basis: 20%; text-align: center; }
            .item>.sub-total { flex-basis: 15%; text-align: center; }
            .total-wrapper { display: flex; flex-direction: row-reverse; margin: 10px; }
            .total-wrapper>.total { flex-basis: 15%; text-align: center; }

            [v-cloak] { display: none; }
        </style>
    </head>
    <div>

        <!--在 #first 元素内部书写根组件的模板(template)-->
        <div id="first" v-cloak>
            <div class="cart">
                <div v-for="(element,index) in items" class="item">
                    <span class="ordinal">{{ index + 1 }}</span>
                    <span class="name">{{ element.name }}</span>
                    <span class="price">{{ element.price.toFixed(2) }}元</span>
                    <span class="count">
                        <button v-on:click="decrease(element.id)">-</button>
                        {{ element.count }}
                        <button @click="increase(element.id)">+</button>
                    </span>
                    <span class="sub-total">{{ element.price * element.count }}</span>
                </div>
                <div class="total-wrapper">
                    <span class="total">总计:{{ totalPrice }}</span>
                </div>
            </div>
        </div>

        <a href="https://cn.vuejs.org/api/built-in-directives.html#v-for">vue.js API: 内置指令(v-for)</a>

        <script src="vue@3.2.45.js" type="text/javascript"></script>

        <script>
            const options = {
                data() {
                    return {
                        items: [
                            { id: 1234, name: 'Java从入门到放弃', price: 99, count: 7 },
                            { id: 2233, name: 'Java从没入门到放弃', price: 88, count: 4 },
                            { id: 4321, name: '骗你学Vue之你行你上啊', price: 56, count: 1 },
                        ]
                    }
                },
                methods: {
                    increase(id) {
                        console.log('increase: id=', id);
                        let book = this.items.find( e => e.id === id );
                        book.count++;
                    },
                    decrease(id){
                        console.log('decrease: id=', id);
                        let book = this.items.find( e => e.id === id );
                        if( book && book.count > 1 ) {
                            book.count--;
                        }
                    }
                },
                computed: {
                    totalPrice() {
                        return this.items.reduce( (p,b) => p + b.price * b.count , 0 );
                    }
                }
            }

            Vue.createApp(options).mount( '#first' );
        </script>
    </div>
</html>